<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        header {
            background: #50b3a2;
            color: white;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #e8491d 3px solid;
        }
        header a {
            color: #ffffff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
        }
        header ul {
            padding: 0;
            list-style: none;
        }
        header li {
            display: inline;
            padding: 0 20px 0 20px;
        }
        header #branding {
            float: left;
        }
        header #branding h1 {
            margin: 0;
        }
        header nav {
            float: right;
            margin-top: 10px;
        }
        header .highlight, header .current a {
            color: #e8491d;
            font-weight: bold;
        }
        header a:hover {
            color: #ffffff;
            font-weight: bold;
        }
        #todoList, #commentList {
            margin-top: 20px;
            padding: 0;
        }
        #todoList li, #commentList li {
            list-style: none;
            margin-bottom: 5px;
            padding: 5px;
            background-color: #f0f0f0;
        }
        #todoList li button, #commentList li button {
            float: right;
            margin-left: 10px;
        }
        #commentForm {
            margin-bottom: 20px;
        }
		footer{
			text-align: center;
		}
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div id="branding">
                <h1>我的主页</h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="index.html">主页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="services.html">服务</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="container">
        <section id="showcase">
            <h1>欢迎来到我的主页</h1>
            <p>在这里，我们不仅仅是装修专家，我们是您梦想空间的构建者。我们致力于通过创
			新设计和精湛工艺，将您的居住或工作空间转变为令人赞叹的杰作</p>
			<img src="1.jpg" alt="" width="200px" height="200px">
			<img src="2.jpg" alt="" width="200px" height="200px">
			<img src="3.jpg" alt="" width="200px" height="200px">
			<img src="4.jpg" alt="" width="200px" height="200px">
        </section>
        <section id="newsletter">
            <h2>订阅我们的装修风格</h2>
            <form>
                <input type="email" placeholder="输入你的邮箱...">
                <button type="submit" class="button_1">订阅</button>
            </form>
        </section>
        <section id="boxes">
            <div class="box">
                <h3>信息服务</h3>
                <p> 品质装修，筑就美好生活空间。我们精雕细琢每一处细节，从时尚大气的客厅设计，到温馨舒适
				的卧室布置，选用环保优质材料，搭配专业精湛工艺
				。让您的家不仅是居住之所，更是心灵的港湾，开启品质生活新篇，选择 [装修公司名称]，为您打造理想家园。</p>
            </div>
            <div class="box">
                <h3>提问式互动</h3>
                <p> 还在为装修风格纠结吗？北欧风的简约、中式风的典雅、现代风的时尚，哪种才是你的心头好？
           [装修公司名称] 在线等你，说出你的想法，让我们为你量身打造专属家居空间，更有装修优惠
          礼包等你来拿！# 装修那些事儿 #在线问答 #装修风格选择</p>
            </div>
            <div class="box">
                <h3>个性化体验</h3>
                <p>我们为您提供丰富多样的材料样本和装饰元素选择，从独特纹理的墙面涂料到别具一格的灯具款式，从个性定
				制的家具到精美的软装配饰，您都可以根据自己的喜好进行搭配组合，确保您的家独一无二，彰显您的专属风格。
				而且，在装修过程中，我们采用先进的数字化技术，让您通过线上平台实时查看施工进度，与施工团队及时沟通，
				提出您的想法和建议，确保整个装修过程完全符合您的预期，让您亲身参与到梦想家园的塑造过程中，享受这一充满创意与惊喜的个性化装修之旅。</p>
            </div>
        </section>
        <section id="todo">
            <h2>待办事项</h2>
            <input type="text" id="newTodo" placeholder="添加新事项">
            <button onclick="addTodo()">添加新事项</button>
            <ul id="todoList">
                <!-- 待办事项将在这里显示 -->
            </ul>
        </section>
        <section id="comments">
            <h2>评论</h2>
            <div id="commentForm">
                <input type="text" id="newComment" placeholder="添加新评论">
                <button onclick="addComment()">添加评论</button>
            </div>
            <ul id="commentList">
                <!-- 评论将在这里显示 -->
            </ul>
        </section>
        
        <script>
            function addComment() {
                var newComment = document.getElementById('newComment').value;
                if (newComment !== "") {
                    var commentList = document.getElementById('commentList');
                    var newCommentItem = document.createElement('li');
                    newCommentItem.innerHTML = newComment + ' <button onclick="editComment(this)">编辑</button> <button onclick="deleteComment(this)">删除</button>';
                    commentList.appendChild(newCommentItem);
                    document.getElementById('newComment').value = ""; // 清空输入框
                }
            }
        
            function editComment(button) {
                var commentItem = button.parentNode;
                var commentText = commentItem.firstChild.nodeValue;
                var inputField = document.createElement('input');
                inputField.type = 'text';
                inputField.value = commentText;
                inputField.onblur = function() { // 当输入框失去焦点时更新评论
                    updateComment(button, this.value);
                };
                commentItem.replaceChild(inputField, commentItem.firstChild);
            }
        
            function updateComment(button, newText) {
                var commentItem = button.parentNode;
                var inputField = commentItem.firstChild;
                commentItem.replaceChild(document.createTextNode(newText), inputField);
            }
        
            function deleteComment(button) {
                button.parentNode.remove();
            }
        </script>
    </div>

    <footer>
       <p>版权所有 &copy; 2025 [公司名称] | 联系电话: [联系电话] | 邮箱: [邮箱地址]</p>
    </footer>

    <script>
        function addTodo() {
            var newTodo = document.getElementById('newTodo').value;
            if (newTodo !== "") {
                var todoList = document.getElementById('todoList');
                var newTodoItem = document.createElement('li');
                newTodoItem.textContent = newTodo;
                var deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.onclick = function() {
                    this.parentNode.remove();
                };
                newTodoItem.appendChild(deleteButton);
                todoList.appendChild(newTodoItem);
                document.getElementById('newTodo').value = ""; // 清空输入框
            }
        }
		    function addComment() {
		        var newComment = document.getElementById('newComment').value;
		        if (newComment !== "") {
		            var commentList = document.getElementById('commentList');
		            var newCommentItem = document.createElement('li');
		            newCommentItem.innerHTML = newComment + ' <button onclick="editComment(this)">编辑</button> <button onclick="deleteComment(this)">删除</button>';
		            commentList.appendChild(newCommentItem);
		            document.getElementById('newComment').value = ""; // 清空输入框
		        }
		    }
		
		    function editComment(button) {
		        var commentItem = button.parentNode;
		        var commentText = commentItem.firstChild.nodeValue;
		        var inputField = document.createElement('input');
		        inputField.type = 'text';
		        inputField.value = commentText;
		        inputField.onblur = function() { // 当输入框失去焦点时更新评论
		            updateComment(button, this.value);
		        };
		        commentItem.replaceChild(inputField, commentItem.firstChild);
		    }
		
		    function updateComment(button, newText) {
		        var commentItem = button.parentNode;
		        var inputField = commentItem.firstChild;
		        commentItem.replaceChild(document.createTextNode(newText), inputField);
		    }
		
		    function deleteComment(button) {
		        button.parentNode.remove();
		    }
		

      
    </script>
</body>
</html>